// Script created 11.03.09 10:54:07
var MarqueeEngine = {
   items : {},
   move : function (id, data)
   {
       this.items[id].move(data);
   },
   dispose : function ()
   {
       for (var id in this.items)
           this.items[id].dispose();
   },
   update : function ()
   {
       for (var id in this.items)
           this.items[id].update();
   },
   create : function (data)
   {
       var id = 'dm(0)'.format(Math.random);

            var ImageWindow=$('imagewindow');
            var PositionofImageWindow=getPosition(ImageWindow);

            if (!$(id))
            {
                var dm=document.createElement ('div')
                dm.id = id;
                dm.innerHTML = '';
                dm.style.border='dotted 2px lime'
                dm.style.position = 'absolute';
                ImageWindow.appendChild (dm);
                dm.invoke = function ()
                {
                    if (!this.bench) return false;
                    var bench = { x:( (this.actual.x * Controller.info.z) + PositionofImageWindow.x) - ImageWindow.scrollLeft, 
                                  y:( (this.actual.y * Controller.info.z) + PositionofImageWindow.y) - ImageWindow.scrollTop };
                    document.title = '(0)x(1)'.format (bench.x, bench.y);
                    this.style.width  = '(0)px'.format (this.bench.w * Controller.info.z);
                    this.style.height = '(0)px'.format (this.bench.h * Controller.info.z);
                    this.style.left   = '(0)px'.format (bench.x);
                    this.style.top    = '(0)px'.format (bench.y);
                    Clip2ImageWindow (this);
                } 
            }


            var dm = $(id); 
            dm.start = { x:data.info.abs.x + PositionofImageWindow.x,y: data.info.abs.y + PositionofImageWindow.y }

            dm.bench = { x:dm.start.x + ImageWindow.scrollLeft, y:dm.start.y + ImageWindow.scrollTop, w:0, h:0 }

            dm.style.left = '(0)px'.format(dm.start.x); 
            dm.style.top  = '(0)px'.format(dm.start.y);

        var object = {     
            id : id,
            size : { w:0,h:0},
            update : function ()
            {
                var im = 'im(0)'.format(this.id)
                if ($(im) && $(im).invoke) $(im).invoke ();
            },
            invoke : function ()
            {
                $(this.id).invoke ();
            },
            dispose : function ()
            {
                $(this.id).style.display='none';
            },
            move : function (data)
            {

                var dm = $(this.id); 
                var ImageWindow=$('imagewindow');
                var PositionofImageWindow=getPosition(ImageWindow);
                var PositionofMarquee=getPosition(dm);
                         
                var pos = { x:data.info.abs.x + PositionofImageWindow.x,y: data.info.abs.y + PositionofImageWindow.y }
                var dif = { x: pos.x - dm.start.x, y: pos.y - dm.start.y }

                dm.actual = { x:PositionofMarquee.x-PositionofImageWindow.x,
                              y:PositionofMarquee.y-PositionofImageWindow.y
                             }

                dm.bench.w = dif.x;
                dm.bench.h = dif.y;
                dm.style.width = '(0)px'.format(dif.x); 
                dm.style.height = '(0)px'.format(dif.y) 

            },
            load : function (c)
            {
                $(this.id).innerHTML = '<img id="im(0)" onload="Attach2Marquee(this)" src="working/marquee/(1)/(2)/(3)/(4)/(5)"/>'.format(this.id,Controller.picture.id,c[0],c[1],c[2],c[3]);
            },
            ignite : function ()
            {
                $(this.id).style.border='solid 2px cyan';
            }
        } 
        MarqueeEngine.items[id] = object;
        Controller.scroller.subscribe (object)
        return object;
  
   }
}

function Clip2ImageWindow (object)
{
    if (!object) return;
    var position = getPosition (object)
    var mywindow = getPosition ($('imagewindow'));
    var off = { x1: mywindow.x - position.x, 
                y1: mywindow.y - position.y,
                x2: position.x + object.offsetWidth - mywindow.x,
                y2: position.y + object.offsetHeight - mywindow.y}
    object.style.clip = 'rect((0)px (1)px (2)px (3)px)'.format(off.y1, off.x2, off.y2, off.x1)
}

function Attach2Marquee(image)
{
    var id=image.id.substr(2);
    var object = MarqueeEngine.items[id];
    object.ignite();
    object.size.w = image.width;
    object.size.h = image.height;
    image.invoke = function ()
    { 
        this.width  = object.size.w * Controller.info.z
        this.height = object.size.h * Controller.info.z
    }
}